<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/admin/adminPage/AdminIndex' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>首页轮播图管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <el-table :data="tableData" border style="width: 70%">
      <el-table-column prop="id" label="酒店Id" width="150px" align="center"></el-table-column>
      <el-table-column label="酒店图片" align="center">
        <!--自定义列 显示轮播图图片 必须添加template-->
        <template slot-scope="scope">
          <!--scope.row代表当前行对应的数据里面的对象-->
          <img :src="'http://localhost:9580'+scope.row.url" width="30%">
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle size="mini"
                     @click="openEditDialog(scope.row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle size="mini"
                     @click="openDeleteConfirm(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="编辑首页轮播图" width="600px" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm" label-width="180px">
        <el-form-item label="首页轮播图图片">
          <img :src="'http://localhost:9580'+ruleForm.url" width="60%" alt="">
          <!--上传组件开始-->
          <el-upload
              ref="upload"
              :action="'http://localhost:9580/upload?dir='+this.dir"
              name="picFile"
              :limit="1"
              list-type="picture-card"
              :on-success="handleSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
          <!--上传组件结束-->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button ref="upload" @click="cancelEditForm()">取 消</el-button>
        <el-button type="primary" @click="submitEditForm()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data(){
    return{
      tableData:[],
      dir: '首页轮播图',
      dialogImageUrl: '',
      bannerId:'',
      dialogVisible: false,
      dialogFormVisible: false,
      ruleForm:{
        url:''
      },
      oldUrl:''
    }
  },
  methods:{
    cancelEditForm() {
      //发出删除图片的请求
      let url = 'http://localhost:9580/remove?url=' + this.ruleForm.url;
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('aJwt')}})
          .get(url).then(function () {

      })
      this.ruleForm.url = '';

      this.$refs.upload.clearFiles();
      this.dialogFormVisible = false;
    },
    openEditDialog(banner) {
      this.bannerId=banner.id;
      this.dialogFormVisible=true;
      this.ruleForm.url=banner.url;
      this.oldUrl=banner.url;
    },
    openDeleteConfirm(banner) {
      let message = '此操作将永久删除【' + banner.id + '】轮播图，是否继续？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(banner);
      }).catch(() => {
      });
    },
    submitEditForm() {
      let url = 'http://localhost:9580/hotelIndexBanners/admin/'+this.bannerId+'/updateAdminHotelIndexBannerById';
      console.log('url = ' + url);

      console.log('ruleForm.url = ' + this.ruleForm.url);

      let formData = this.qs.stringify(this.ruleForm);
      console.log('formData = ' + formData);

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('aJwt')}})
          .post(url, formData).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message({
            message: '修改轮播图成功！',
            type: 'success'
          });
          //发出删除旧图片的请求
          if (this.oldUrl!=this.ruleForm.url){
            let url = 'http://localhost:9580/remove?url=' + this.oldUrl;
            this.axios
                .create({'headers': {'Authorization': localStorage.getItem('aJwt')}})
                .get(url).then(function () {

            })
          }
          this.$refs.upload.clearFiles();
          this.loadBannerList();
          this.dialogFormVisible = false;
        } else if (responseBody.state == 40400) {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.dialogFormVisible = false;
              this.loadBannerList();
            }
          });
        } else {
          this.$message.error(responseBody.message);
        }
      });
    },
    handleDelete(banner) {
      let url = 'http://localhost:9580/hotelIndexBanners/admin/'+banner.id+'/deleteAdminHotelIndexBanner';
      console.log('url = ' + url);

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('aJwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message({
            message: '删除轮播图成功！',
            type: 'success'
          });
          let url = 'http://localhost:9580/remove?url=' + banner.url;
          this.axios
              .create({'headers': {'Authorization': localStorage.getItem('aJwt')}})
              .get(url).then(function () {
            console.log("已删除文件夹中的图片");
          })
          this.loadBannerList();
        } else if (responseBody.state == 40400) {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadBannerList();
            }
          });
        } else {
          this.$message.error(responseBody.message);
        }
      });
    },
    loadBannerList(){
      let url = 'http://localhost:9580/hotelIndexBanners/admin/getAdminHotelIndexBannerList';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('aJwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.tableData = responseBody.data;
      });
    },
    handleSuccess(response, file, fileList) {
      this.ruleForm.url = response.data;
      console.log(this.ruleForm.url);
    },
    handleRemove(file, fileList) {

      let url = 'http://localhost:9580/remove?url=' + this.ruleForm.url;
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('aJwt')}})
          .get(url).then(function () {

      })
      this.ruleForm.url = '';
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  },
  mounted() {
    this.loadBannerList();
  }
}
</script>

<style scoped>

</style>